import React from "react";
import { Block } from "@ct0/ui";
import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  card: {
    padding: "20px",
    border: "1px solid #e0e0e0",
  },
});

export default function BlockPanel() {
  const classes = useStyles();

  return (
    <div>
      <h2>Block 块组件</h2>
      <ul>
        <li>提供块状组件实现卡片布局排版</li>
      </ul>
      <Block>
        <Block>
          <Block gutter={[16, 16]}>
            <Block horizontal>
              <Block>
                <div className={classes.card}>1.1</div>
              </Block>
              <Block>
                <div className={classes.card}>1.2</div>
              </Block>
              <Block>
                <div className={classes.card}>1.3</div>
              </Block>
            </Block>
            <Block>
              <div className={classes.card}>2</div>
            </Block>
            <Block horizontal>
              <Block width="200">
                <div className={classes.card}>3.1</div>
              </Block>
              <Block>
                <Block horizontal>
                  <Block>
                    <div className={classes.card}>3.2</div>
                  </Block>
                  <Block>
                    <div className={classes.card}>3.3</div>
                  </Block>
                </Block>
                <Block>
                  <div className={classes.card}>3.4</div>
                </Block>
                <Block>
                  <div className={classes.card}>3.5</div>
                </Block>
              </Block>
            </Block>
            <Block horizontal>
              <Block width="70%">
                <div className={classes.card}>4.1</div>
              </Block>
              <Block>
                <Block>
                  <Block>
                    <Block>
                      <div className={classes.card}>4.2</div>
                    </Block>
                  </Block>
                </Block>
                <Block>
                  <div className={classes.card}>4.3</div>
                </Block>
              </Block>
            </Block>
          </Block>
        </Block>
        <Block>
          <ul>
            <li>
              Block 布局需要在一个组件当中一次性布局完成，放到子组件中的 Block
              会被认为重新开始布局，导致边距增加
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <div style={{ width: "48%" }}>
                  <pre>
                    <code className="language-jsx">
                      <strong>错误示例</strong>
                      {`
function Main(){
  return <Block>
    <Child />
    <Child />
  </Block>
}

function Child(){
  return <Block>
    this is a child
  </Block>
}
        `}
                    </code>
                  </pre>{" "}
                </div>
                <div style={{ width: "48%" }}>
                  <pre>
                    <code className="language-jsx">
                      <strong>正确示例:</strong>
                      {`
  function Main(){
    return <Block>
      <Block>
        <Child />
      </Block>
      <Block>
        <Child />
      </Block>
    </Block>
  }
  
  function Child(){
    return <>this is a child<>
  }
                `}
                    </code>
                  </pre>
                </div>
              </div>
            </li>
            <li>
              在只有一个块布局时，为了保证外边距的正确性，需要再嵌套一个
              Block。例如
              <pre>
                <code className="language-jsx">
                  {`<Block>`}
                  {"\n"}
                  {`<Block>`}
                  正确的外边距
                  {`</Block>`}
                  {"\n"}
                  {`</Block>`}
                </code>
              </pre>
            </li>
          </ul>
        </Block>
      </Block>
      <h2>调用方式</h2>
      <div className="code" style={{ marginTop: "10px" }}>
        <pre>
          <code className="language-jsx">
            {`import { Block } from '@ct0/ui'`}
            {"\n"}
            ReactDOM.render(
            {`<Block />`}, mountNode );
          </code>
        </pre>
      </div>
      <h2>API</h2>
      <table border="1">
        <thead>
          <tr>
            <th>参数</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>gutter</td>
            <td>间距(选填)</td>
            <td>[number, number]([行间距，列间距])</td>
            <td>
              1. 根节点和不含Block子节点的Block容器默认值为: [16, 16]; <br />
              2. 含有Block子节点的Block容器gutter值为[0, 0]
            </td>
          </tr>
          <tr>
            <td>width</td>
            <td>
              当前块区域的宽度(选填，当宽高标记为 fraction
              时，设置一个固定默认大小，然后配合 flex-grow 实现均匀分布)
            </td>
            <td>number | "fr" | "fraction" | string</td>
            <td>-</td>
          </tr>
          <tr>
            <td>height</td>
            <td>当前块区域的高度(选填，说明同宽)</td>
            <td>number | "fr" | "fraction" | string</td>
            <td>-</td>
          </tr>
          <tr>
            <td>children</td>
            <td>子节点(选填)</td>
            <td>React.ReactNode</td>
            <td>-</td>
          </tr>
          <tr>
            <td>classname</td>
            <td>容器的classname(选填)</td>
            <td>string</td>
            <td>-</td>
          </tr>
          <tr>
            <td>horizontal</td>
            <td>子节点水平方向排列(选填)</td>
            <td>boolean</td>
            <td>false</td>
          </tr>
          <tr>
            <td>grow</td>
            <td>容器的flex-grow属性(选填)</td>
            <td>number</td>
            <td>0</td>
          </tr>
          <tr>
            <td>shrink</td>
            <td>容器的flex-shrink属性(选填)</td>
            <td>number</td>
            <td>0</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
